<template>
  <el-upload
    v-model:file-list="curFileList"
    multiple
    :http-request="uploadFile"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    :on-exceed = "handleExceed"
    :limit="limit"
  >
    <el-button type="primary"
    :style="[ type === DialogType.detail ?'display: none':'' ]">上传文件</el-button>
  </el-upload>
</template>

<script lang="ts" setup>
import { nextTick, Ref, ref, defineExpose, defineProps, computed, watch } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { upload, getImg } from "@/api/common";

import { ElMessage, type UploadProps, type UploadUserFile } from "element-plus";
import { DialogType } from "@/utils/types";
const props = defineProps({
  fileList: {
    type: Array,
    default: [],
  },
  type: {
    type: Number,
    default: 1,
  },
  limit: {
    type: Number,
    default: 20,
  },
});
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const curFileList = computed(()=>props.fileList);
console.log(props.fileList, "curFileList");
const emit = defineEmits(["addFile", "updateFileList"]);
const handleRemove: UploadProps["onRemove"] = (uploadFile, uploadFiles) => {
  emit("updateFileList", uploadFiles);
};
const uploadFile = (f: any) => {
  let param = new FormData(); //创建form对象
  param.append("file", f.file); //通过append向form对象添加数据
  param.append("type", "INDEX_FILE"); //添加form表单中其他数据
  return upload(param);
};
const handleSuccess = (uploadFile: any) => {
  emit("addFile", uploadFile.value);
};
const handleExceed = ()=>{  
  ElMessage.error("文件超出最大上传数量");
}
defineExpose({});
</script>
<style>
.btnHide .el-upload--picture-card {
  display: none;
}
</style>
